<template>
	<view>
		<view class="navbox">
			<view style="padding:20upx;margin-top:30upx;">
				<search :keyword="keyword" />
			</view>
		</view>
		<view class="navbox_xheight"></view>
		
		<view class="module module-merge">
		    <view id="books" class="book-ol book-ol-rank">
				<view class="book-li" v-for="(item,index) in list" :key="index" @click="$go.burl('book/detail?id='+item.id)">
					<view class="rank-index">{{index+1}}.</view>
					<view class="book-layout">
						<image :src="item.icon" class="book-cover" />
						<view class="book-cell">
							<view class="book-title-x">
								<view class="book-title-r">
									<view class="red">阅读数{{item.hits}}</view>
								</view>
								<view class="book-title">{{item.title}}</view>
							</view>
							<view class="book-tags"><text v-if="item.cat">{{item.cat.name}}</text>·<text>{{item.size}}</text></view>
							<view class="book-desc">{{item.intro}}</view>
							<view class="book-meta">
								<view class="book-meta-l"> 
									<view class="book-author">
										<view class="icon icon-human" role="img" title="作者"></view>{{item.author}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>  
				<view class="more" v-if="!list || list.length<1" style="margin-top:40upx;color:#888;font-size:26upx;text-align: center; width:100%;">没有“{{keyword}}”相关的图书</view>
				<view class="more" v-if="list && list.length>0 && isEnd" style="color:#888;font-size:26upx;text-align: center; width:100%;">我也是有底线的</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '@/components/public/booksearch.vue' ; 
	export default {
		components: {
			search
		},
		computed: {
			top() {
				return this.$ba.safeAreaTop() + this.$ba.navHeight();
			}
		}, 
		data() {
			return {
				list: [],
				keyword:'',
				p:1 ,
				ps:100 ,
			};
		},
		onLoad(props){ 
			if(props.keyword) this.keyword = props.keyword ;
			
			this.fetch() ; 
		},
		//上拉触底 加载更多
		onReachBottom() {
			this.fetchList();
		},
		methods: {
			fetch(){
				this.fetchList() ;
			},
			
			getFixSize(size){
				if(!size) return '0字' ; 
				
				if(size>10000) size = Math.round(size/ 10000) + '万字'; 
				
				return size ;
			},
			
			resetData(){
				this.list = [] ;
				this.p = 1;
				this.ps = 100 ;
				this.isEnd = false ;
			},
			
			fetchList(){
				if(this._xing) return ;
				if(this.isEnd) return ; 
				
				let that = this ;
				let post = {} ;
				if(this.keyword) post.keyword = this.keyword ;
				if(this.p) post.p = this.p ; 
				if(this.ps) post.ps = this.ps ;
				this._xing = true ; 
				this.$loading.show('加载中');
				this.$iapi.vapi('book/list', post, {
					succ: js => {
						if(!js || !js.list || js.list.length < 1) return ; 
						
						js.list.map(it=>{
							it.size = that.getFixSize(it.size);
							that.list.push(it) ; 
						});
						
						that.p++ ;
						if(js.sum <= (this.p * this.ps)) that.isEnd = true ;
					},
					ever: js => {
						this._xing = false;
						this.$loading.hide() ;
					},
				});
			},
			
			clickToBack() {
				this.$go.back();
			},
			
			//刷新
			onPullDownRefresh() {
				wx.stopPullDownRefresh();
				this.resetData() ; 
				this.fetchList() ;
			},
		}
	};
</script>

<style>
	page{
		padding:0;
		overflow-x:hidden;
		font-family: sans-serif;
		line-height: 1.5;
		-webkit-user-select: none;
		color: #33373d;
		fill: currentColor;
		-webkit-tap-highlight-color: transparent;
		-webkit-text-size-adjust: none;
		-webkit-touch-callout: none;
		background-color: #fff;
	}
	
	.toplist-tag-x{
		margin:20upx 0upx;
		position: relative;
		z-index: 1;
		overflow: hidden;
		-webkit-transition: -webkit-transform .15s;
		transition: transform .15s;
		background-color: #f6f7f9;
	}
	
	.toplist-tag {
	    margin-left: 1rem;
		display: inline-block;
		font-family: sans-serif;
		    line-height: 1.5;
		    -webkit-user-select: none;
		    color: #33373d;
		    fill: currentColor;
	}
	
	.toplist-tag .btn-tag {
	    margin: .5625rem 0;
	}
	
	.toplist-tag.active { 
	    border-color: #ff6600;
		color:#ff6600;
	}
	
	.btn-tag {
	    line-height: 1.25rem;
	    padding: 0 .625rem;
	    border-color: transparent;
		font-size: .8125rem;
		display: inline-block;
		padding: 0 .625rem;
		text-align: center;
	}
	
	.active .btn-tag{
		border-radius: 30upx;
		border: 1px solid;
	}
	
	.module-merge {
	    margin: 0;
	}
	
	.book-ol-rank {
	    padding-left: 3.125rem;
	    counter-reset: bookrank;
		padding: 0;
		list-style: none;
	}
	
	.book-ol-rank .book-li {
	    position: relative;
		display: flex;
		flex-wrap:inherit;
		text-align: -webkit-match-parent;
	}
	
	.book-ol-rank .book-li .rank-index {
	    font: bold 1em/1.5em 'DIN Alternate';
		display: inline-block;
	    top: 0;
	    bottom: 0;
	    left: -2.125rem;
	    height: 1.5em;
	    margin: auto;
	}
	.book-layout {
	    display: list-item;
	    text-align: -webkit-match-parent;
	    overflow: hidden;
	    padding: 0.5rem 1rem;
		    list-style: none;
	    -webkit-transition: padding-left .15s;
	    transition: padding-left .15s;
	}
	
	.book-cover {
	    font-size: 0;
	    float: left;
	    width: 4.125rem;
	    height: 5.5rem;
	    margin-right: .5rem;
	    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
	}
	.book-cell {
	    overflow: hidden;
	}
	
	.book-title-x {
	    display: block;
	    overflow: hidden;
	}
	.book-title-r:first-child {
	    margin-left: .5rem;
	}
	.book-title-r {
	    font-size: .8125rem;
	    line-height: 1.5rem;
	    float: right;
	    margin-left: .5rem;
	    color: #969ba3;
	}
	
	.red {
	    color: #ed424b;
	}
	.book-title-r {
	    font-size: .8125rem;
	    line-height: 1.5rem;
	    float: right;
	    margin-left: .5rem;
	    color: #969ba3;
	}
	
	.book-title {
	    line-height: 1.4;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	.book-tags {
	    font-size: .8125rem;
	    margin: .125rem 0;
	    color: #969ba3;
		word-break: break-all;
	}
	
	.book-tags + .book-desc {
	    margin: .125rem 0 .3125rem;
	}
	
	.book-ol-rank .book-desc {
	    white-space: nowrap;
	    text-overflow: ellipsis;
		word-break: break-all;
	} 
	.book-desc {
	    font-size: .875rem;
	    line-height: 1.125rem;
	    overflow: hidden;
	    margin: .375rem 0;
	    color: #969ba3;
	}
	
	.book-meta {
	    font-size: .75rem;
	    overflow: hidden;
	}
	.book-meta-l:only-child {
	    float: none;
	}
	
	.book-author {
	    font-size: .8125rem;
	    display: block;
	    overflow: hidden;
	    max-width: 10em;
	    max-width: calc(100vw - 2rem - (176rem / 16));
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    color: #969ba3;
	}
	.icon > svg, svg.icon {
	    width: 1em;
	    height: 1em;
	    vertical-align: -.25ex;
	    fill: currentColor;
	}
	.book-author .icon-human {
	    font-size: .75rem;
	    margin-right: .1875rem;
	    vertical-align: -.15ex;
	}
	
	.navbox{
		position: fixed;
		top:0px;
		left:0px;
		background: #fff;
		height:140upx;
		width:100%;
		z-index: 99;
	}
	
	.navbox_xheight{
		height:150upx;
	}
</style>
